<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
    <script src="../libs/dat.gui.min.js" type="text/javascript"></script>
    <link href="../css/dat-gui-light-style.css" rel="stylesheet"/>
</head>
<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<div class="slideout-sidebar">
    <h1>LinesMaterial</h1>
    <p>Configures appearance of lines.</p>
    <h3>Customize LinesMaterial</h3>
    <div id="myDatGuiContainer"></div>
    <h3>Components Used</h3>
    <ul>
        <li>
            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
               target="_other">Viewer</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/model/SceneModel.js~SceneModel.html"
               target="_other">SceneModel</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/materials/LinesMaterial.js~LinesMaterial.html"
               target="_other">LinesMaterial</a>
        </li>
    </ul>
</div>
</body>

<script id="source" type="module">

    //------------------------------------------------------------------------------------------------------------------
    // Import the modules we need for this example
    //------------------------------------------------------------------------------------------------------------------

    import {Viewer, SceneModel, buildVectorTextGeometry} from "../../dist/xeokit-sdk.min.es.js";

    //------------------------------------------------------------------------------------------------------------------
    // Create a Viewer and arrange the camera
    //------------------------------------------------------------------------------------------------------------------

    const viewer = new Viewer({
        canvasId: "myCanvas",
        transparent: true
    });

    viewer.scene.camera.eye = [-76.69666592218609, -132.08203002146428, 288.0159973913678];
    viewer.scene.camera.look = [125.36000000000017, -129.3600000000002, 1.7053025658242404e-13];
    viewer.scene.camera.up = [-0.004443265120899727, 0.9999700714648385, 0.006333527427217104];

    const cameraControl = viewer.cameraControl;
    cameraControl.navMode = "orbit";
    cameraControl.followPointer = true;

    viewer.camera.perspective.far = 15000000;

    //------------------------------------------------------------------------------------------------------------------
    // Configure lines appearance
    //------------------------------------------------------------------------------------------------------------------

    viewer.scene.linesMaterial.lineWidth = 1;

    //------------------------------------------------------------------------------------------------------------------
    // Create a SceneModel containing lines
    //------------------------------------------------------------------------------------------------------------------

    const vboSceneModel = new SceneModel(viewer.scene, {
        id: "table",
        isModel: true, // <--------------------- Represents a model, registers SceneModel by ID on viewer.scene.models
        position: [0, 0, 0],
        scale: [1, 1, 1],
        rotation: [0, 0, 0]
    });

    const geometry = buildVectorTextGeometry({
        text: document.getElementById("source").innerText,
        size: 2
    });

    vboSceneModel.createMesh({
        id: "linesMesh",
        primitive: "lines",
        color: [0, 0, 1],
        positions: geometry.positions,
        indices: geometry.indices
    });

    vboSceneModel.createEntity({
        id: "lines",
        meshIds: ["linesMesh"]
    });

    vboSceneModel.finalize();

    //------------------------------------------------------------------------------------------------------------------
    // GUI to play with lines material properties
    //------------------------------------------------------------------------------------------------------------------

    const linesMaterial = viewer.scene.linesMaterial;

    const guiParams = new function () {
        this.lineWidth = linesMaterial.lineWidth;
    }();

    const update = function () {
        linesMaterial.lineWidth = guiParams.lineWidth;
        requestAnimationFrame(update);
    };

    update();

    const gui = new dat.GUI({autoPlace: false, width: "100%"});

    const linesMaterialFolder = gui.addFolder('LinesMaterial');
    linesMaterialFolder.add(guiParams, 'lineWidth', 1, 15);
    linesMaterialFolder.open();

    const customContainer = document.getElementById('myDatGuiContainer');
    customContainer.appendChild(gui.domElement);

    window.viewer = viewer;
</script>
</html>